<template>
  <div class="loginbg">
    <ul>
      <li>
        <router-link :to="{ name: 'websiteHome' }" exact tag="a"
          >首页</router-link
        >
      </li>
      <!-- <li><router-link :to='{ name: 'agent'}' exact tag='a'>代理商</router-link></li> -->
      <!-- <li>
        <router-link :to='{ name: 'anli'}' exact tag='a'>案例展示</router-link>
      </li>
      <li>
        <router-link :to='{ name: 'zhaoshang2'}' exact tag='a'>招商加盟</router-link>
      </li>
      <li>
        <router-link :to='{ name: 'jituan'}' exact tag='a'>关于我们</router-link>
      </li> -->
    </ul>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
.loginbg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url(http://oss.ztwlxx.cn/logins.png) no-repeat;
  background-size: 100% auto;
  ul {
    float: right;
    padding: 30px 0 20px;
    margin-left: 20px;
    color: #fff;
    li {
      float: left;
      line-height: 50px;
      width: 120px;
      text-align: center;
      &:hover {
        a {
          color: #52a2f4;
          &:after {
            width: 100%;
          }
        }
      }
    }
    a {
      display: inline-block;
      transition: all 0.3s;
      position: relative;
      &:after {
        content: "";
        display: block;
        position: absolute;
        bottom: 8px;
        width: 0;
        height: 2px;
        background: #52a2f4;
        transition: all 0.3s;
      }
    }
    .active {
      color: #52a2f4;
      &:after {
        width: 100%;
      }
    }
  }
}
</style>
